import React, { useEffect, useState } from 'react'
import '../css/Details_ditu.css'
import { NavBar } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import axios from 'axios'
import Details_ditu from './Details_ditu'
import Orderform_item from './Orderform_item'
import Details_num from './Details_num'
import { Sticky } from '@nutui/nutui-react'

export default function Details() {
  let navigate = useNavigate()
  let ids = useLocation().search.split('=')[1]
  let back = () => { navigate(-1) }
  // 存放该订单的状态
  let [state, setstate] = useState(1)
  // 存放该订单的收货地址
  let [addres, setaddres] = useState([])
  // 存放该订单的商品
  let [goodsid, setgoodsid] = useState([])
  //存放该订单的下单时间
  let [times,settimes] =useState("")
  let getdetails = async () => {
    let data = await axios.get(`http://127.0.0.1:3000/users/order_details?ids=${ids}`)
    let obj = data.data.data
    setstate(obj.state)
    setaddres(obj.address)
    setgoodsid(obj.goodsid)
    settimes(obj.times)
  }
  useEffect(() => {
    getdetails()
  }, [])
  return (
    <div>
      <Sticky threshold={0}>
        <NavBar onBack={back} style={{backgroundColor:"white",width:"100vw"}}>订单详情</NavBar>
      </Sticky>
      <div style={{ display: state == 1 ? "none" : "block" }}>
        <Details_ditu></Details_ditu>
      </div>
      <p style={{ display: state == 1 ? "block" : "none", fontSize: "0.36rem" }}>待支付</p>

      <div className="details_address">
        <p style={{ display: "flex", justifyContent: "space-between" }}>
          <span>收货人：{addres.name}</span>
          <span>{addres.phone}</span>
        </p>
        <p>
          收货地址：{addres.address}
        </p>
      </div>
      <Orderform_item info={goodsid} state={state}></Orderform_item>
      <Details_num goodsid={goodsid} state={state}></Details_num>

      <div className="details_num_list">
        <p>订单编号</p>
        <p>{ids}</p>
      </div>
      <div className="details_num_list">
        <p>下单时间</p>
        <p>{times}</p>
      </div>
      
      <div className="zhanwei"></div>
      <div className="details_foote" style={{display:state==1?"block":"none"}}>
        <button >取消订单</button>
        <button style={{ borderColor: "#99b97d", color: "#99b97d" }}>去支付</button>
      </div>
      <div className="details_foote" style={{display:state==3|4?"block":"none"}}>
        <button style={{ borderColor: "#99b97d", color: "#99b97d" }}>确认收货</button>
      </div>
    </div>
  )
}
